<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="47%"
      @close="closeDialog"
    >
      <el-row>
        <el-col :span="6"
          ><div class="">
            【题型】：{{ hireEnum[detailList.questionType] }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="">【编号】：{{ detailList.id }}</div></el-col
        >
        <el-col :span="6"
          ><div class="">
            【难度】：{{ diffEnum[detailList.difficulty] }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="">【标签】：{{ detailList.tags }}</div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6"
          ><div class="">【学科】：{{ detailList.subjectName }}</div></el-col
        >
        <el-col :span="6"
          ><div class="">【目录】：{{ detailList.directoryName }}</div></el-col
        >
        <el-col :span="6"
          ><div class="">【方向】：{{ detailList.direction }}</div></el-col
        >
      </el-row>

      <hr />
      <el-row>
        <el-col :span="24"
          ><div class="">
            【题干】：<span
              style="color: blue"
              v-html="detailList.question"
            ></span></div></el-col
      ></el-row>

      <!-- 如果题型是单选下面标签将显示 -->
      <div v-if="detailList.questionType === '1'">
        <el-row>
          <el-col :span="24"
            ><div>单选题 选项:(以下选中的选项为正确答案)</div></el-col
          >
        </el-row>
        <el-radio-group v-model="radio">
          <el-radio
            disabled
            v-for="(item, index) in detailList.options"
            :key="item.id"
            :label="item.isRight"
            style="display: block"
            >{{ detailList.options[index].title }}</el-radio
          >
        </el-radio-group>
      </div>

      <!-- 如果题型是多选下面标签将显示 -->
      <div v-if="detailList.questionType === '2'">
        <el-row>
          <el-col :span="24"
            ><div>多选题 选项:(以下选中的选项为正确答案)</div></el-col
          >
        </el-row>
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            disabled
            v-for="(item, index) in detailList.options"
            :key="item.id"
            style="display: block"
            :label="item.isRight"
            >{{ detailList.options[index].title }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <hr />
      <el-row>
        <el-col :span="24"
          ><div>
            【参考答案】：<el-button
              size="small"
              type="danger"
              @click="showVideo"
              >视频答案预览</el-button
            >
            <div>
              <video
                :src="detailList.videoURL"
                :controls="videoOptions.controls"
                class="video-js vjs-big-play-centered vjs-fluid"
                webkit-playsinline="true"
                playsinline="true"
                x-webkit-airplay="allow"
                x5-playsinline
                style="display: none"
                autoplay="autoplay"
                ref="video"
              ></video>
            </div>
            <div class="player-container"></div></div></el-col
      ></el-row>
      <hr />
      <el-row>
        <el-col :span="24"
          ><div>
            【答案解析】：<span v-html="detailList.answer"></span></div></el-col
      ></el-row>
      <hr />
      <el-row>
        <el-col :span="24"
          ><div>【题目备注】：{{ detailList.remarks }}</div></el-col
        ></el-row
      >
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$emit('closeDialog')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    detailList: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 枚举 题型
      hireEnum: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      // 枚举 难度
      diffEnum: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 单选框组
      radio: 1,
      // 多选框组
      checkList: ['选中且禁用', '复选框 A'],
      // 视频播放模块
      videoOptions: {
        controls: true,
        src: 'xxxxxxx.mp4' // url地址
      },
      player: null,
      playTime: '',
      seekTime: '',
      current: ''
    }
  },
  methods: {
    // 通知父组件关闭弹窗
    closeDialog () {
      this.$emit('closeDialog')
    },
    // 展示视频模块
    showVideo () {
      this.$refs.video.style = 'display:block'
    }
  }
}
</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
